<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="注册成功.html" id="form1">
			用户名: <input type="text" name="username" id="input1"/><br />
			密码: <input type="text" name="password" id="input2"/><br />
			<input type="submit" />
			<input type="reset" />
			
		</form>
		
		<script>
			// onfocus 获得焦点
			input1.onfocus = function()
			{
				// 通过event.target得到当前触发事件的对象
				var obj = event.target;
				obj.style.backgroundColor = "#ff0000";
			}
			
			// onblur 失去焦点
			input1.onblur = function()
			{
				var obj = event.target;
				obj.style.backgroundColor = "#ffffff";
			}
			
			// onchange 失去焦点 且内容改变
			input1.onchange = function()
			{
				console.log("内容改变了")
			}
			
			// onsubmit 表单提交时触发的事件
			form1.onsubmit=function()
			{
				console.log("表单提交,检查表单内容是否正确")
				// return false
				return true;
			}
			
			// onreset 表单内容充值
			form1.onreset = function()
			{
				console.log("表单重置")
			}
			
					// 练习:
					// 编写一个用户注册页面
					// 用户名
					// 密码
					// 重复密码
					// 邮箱
					// 电话号码
					
					
					// 1. 表单元素获得焦点时背景颜色变深，失去焦点时变浅
					// 2. 用户输入用户名后，使用onchange 检测用户名长度是否大于>6
					// 3. 检测密码和重复密码是否一致
					// 4. 电话号码只允许输入数字
					// 5. 表单提交时，检测输入是否正确，正确可提交看,不正确不可以提交
					 
		</script>
	</body>
</html>